import React from "react";
import { useShallow } from "zustand/react/shallow";
import EchartsInstance from "@/components/EchartsInstance";
import { useGlobalStore } from "@/stores";
import { FeedbackOptions } from "./options.ts";

interface Props {
  data: Record<string, any>;
}

const Feedback: React.FC<Props> = (props) => {
  const { renderer } = useGlobalStore(useShallow((state) => ({ renderer: state.renderer })));

  return <EchartsInstance className="w-[100px] h-[100px]" renderer={renderer} options={FeedbackOptions(props.data)} />;
};

export default React.memo(Feedback);
